<template>
	<div>
		<div>
			<van-nav-bar  @click-left="$router.back()" style="background: #d12d1a;" title="注册" left-text="返回"  left-arrow />
		</div>
		<van-form ref="hqqq" @submit="onSubmit" :validate-first="true">
			<van-field v-model="username" name="username" label="用户名" placeholder="用户名" :rules="[{ required: true, message: '请填写用户名' },
    { pattern:/^1[3-9]\d{9}$/, message: '电话格式错误' }
    ]" />
			<van-field v-model="vercode" name="vercode" center clearable label="短信验证码" placeholder="请输入短信验证码" :rules="[{ required: true, message: '请输入短信验证码' },
       { pattern:/^\d{6}$/, message: '格式错误' }
    ]">
				<template #button>
					<van-button loading-text="发送中..." :loading="loading" native-type="button" @click="hq" size="small"
						type="primary">{{yzm}}</van-button>
				</template>
			</van-field>
			<van-field v-model="password" type="password" name="password" label="密码" placeholder="密码" :rules="[{ required: true, message: '请填写密码' },
    { validator:(val)=>/^\w{6,12}$/.test(val), message: '请输入6-12位的的密码格式' }
    ]" />
			<div style="margin: 16px;">
				<van-button round block type="info" native-type="submit">提交</van-button>
			</div>
		</van-form>
	</div>
</template>

<script>
	import {
		zcuser,
		yzmhq,
		zxzh
	} from '@/api/dljk.js'
	let sl = null;
	let dsq = null;
	export default {
		data() {
			return {
				username: '',
				password: '',
				vercode: '',
				clickbale: true, //里面的点击事件
				yzm: '发送验证码',
				sl: 60,
				loading: false
			};
		},
		created() {
			// zxzh({
			//     username:'18522220000',
			//     password:'123456'
			// })
		},
		beforeDestroy() {
			clearInterval(dsq) //组件销毁清除计时器
		},
		methods: {
			onSubmit(values) {
				console.log('submit', values);
				zcuser(values).then((data) => {
					console.log(data)
					let {
						uid,
						token,
						tokenExpired,
						userInfo
					} = data;
					localStorage.setItem('uid', uid)
					localStorage.setItem('token', token)
					localStorage.setItem('tokenExpired', tokenExpired)
					localStorage.setItem('userInfo', JSON.stringify(userInfo))
					if (data.code == 0) {
						this.$toast(data.msg);
						setTimeout(() => {
							this.$router.back()
						}, 500)
					} else {
						this.$toast(data.msg)

					}
				})

			},
			hq() {
				//   console.log(this.$refs.hqqq.validate('username')) 

				// let mobile=this.$refs.hqqq.username
				// yzmhq({
				//      type:'register',
				//      mobile
				// })
				if (!this.clickbale) return
				if(this.username==''){
                            this.$toast('请输入用户名')
							return
				}else{

				
				this.$refs.hqqq.validate('username').then(data => {
					console.log(data)
					let {
						username: mobile
					} = this;
					this.clickbale = false;
					this.loading = true;
					// return yzmhq({
					//    type:'register',
					//    mobile
					// })
				}) //跟上面return 返回一样 下面是另一种写法
				yzmhq({
					type: 'register',
					mobile: this.username
				}).then((data) => {
					if (data.code == 0) {
						this.$toast(data.msg + data.data)
						dsq = setInterval(() => {
							this.clickbale = false
							this.loading = false
							this.sl--;
							this.yzm = this.sl + 's后可以发送'
							if (this.sl <= 0) {
								this.yzm = '再次获取'
								clearInterval(dsq)
								this.clickbale = true
								this.sl = 60
							}
						}, 1000)
					} else {
						this.$toast(data.msg)
					}
				})
			}
			}
		},
	};
</script>

<style scoped>
	.input:-internal-autofill-selected {
		background-color: none;
	}
		::v-deep .van-ellipsis{
		color: #FFB619;
	}
	::v-deep .van-nav-bar__text{
 color: #FFB619;
	}
	::v-deep .van-icon-arrow-left{
		color: #FFB619;
	}
	::v-deep .van-button--info{
		background: #d12d1a;
		border: 1px solid #d12d1a;
		color: #FFB619;
	}
	.van-button--small{
		background: #d12d1a;
		border: 1px solid #d12d1a;
		color: #FFB619;
		/* background: #244028;
		border: 1px solid #244028; */
	}
	/* ::v-deep .van-field__label{
		color: #FFB619;
	} */
</style>
